/**
 * Created by xiangjiayu on 2017/9/14. 小票
 */
import React from 'react'
import {
  Icon,
  Button,
  Row,
  Col,
  Input,
  Select,
  DatePicker,
  Cascader,
  Radio,
  Modal,
  Dropdown,
  Checkbox,
  Form,
  Upload,
  Progress
} from 'antd'

export default class Password extends React.Component {
  render () {
    return (
      <div>
        <h3 className="title-h3">密码修改</h3>
        <div className="add-cont">
          <Row gutter={16}>
            <Col span={3} className="text-r">
              <div className="ant-form-item-label">
                <label><span className="span-left">原始密码</span></label>
              </div>
            </Col>
            <Col span={5}>
              <div className="ant-form-item-control">
                <Input size="large" placeholder="请输入原始密码" type="password"/>
              </div>
            </Col>
          </Row>
          <Row gutter={16}>
            <Col span={3} className="text-r">
              <div className="ant-form-item-label">
                <label><span className="span-left">新密码</span></label>
              </div>
            </Col>
            <Col span={5}>
              <div className="ant-form-item-control">
                <Input size="large" placeholder="请输入新密码" type="password"/>
              </div>
            </Col>
          </Row>
          <Row gutter={16}>
            <Col span={3} className="text-r">
              <div className="ant-form-item-label">
                <label><span className="span-left">确认密码</span></label>
              </div>
            </Col>
            <Col span={5}>
              <div className="ant-form-item-control">
                <Input size="large" placeholder="请输入确认密码" type="password"/>
              </div>
            </Col>
          </Row>
          <Row gutter={16}>
            <Col span={3} className="text-r">
              <div className="ant-form-item-label">
                <label><span className="span-left">密码强度</span></label>
              </div>
            </Col>
            <Col span={5}>
              <div className="ant-form-item-control">
                <Progress percent={25} strokeWidth={5} status="exception" format={percent => `低`}/>
                <Progress percent={60} strokeWidth={5} format={percent => `中`}/>
                <Progress percent={100} strokeWidth={5} format={percent => `强`}/>
              </div>
            </Col>
          </Row>
          <Row gutter={16}>
            <Col span={3}></Col>
            <Col span={5}>
              <Button type="primary" size="large">保存</Button>
            </Col>
          </Row>
        </div>
      </div>
    )
  }
}